<template>
    <p class="typetitle">全部订单</p>
    <el-table :data="orderlist">
        <el-table-column prop="id" label="订单编号" />
        <el-table-column prop="datetime" label="下单日期" :formatter="dateFormat" />
        <el-table-column label="地址">
            <template #default="scope">
                <p>{{ scope.row.address }}</p>
                <p>
                    {{ scope.row.name }}
                    {{ scope.row.phone }}
                </p>
            </template>
        </el-table-column>
        <el-table-column prop="total" label="总价" />
        <el-table-column prop="paytype" label="支付状态" />
        <el-table-column prop="status" label="物流信息" />
        <el-table-column label="操作">
            <template #default="scope">
                <p>
                    <el-popover placement="right" :width="400" trigger="click">
                        <template #reference>
                            <el-button type="warning" @click="showitem(scope.row.id)">查看订单详情</el-button>
                        </template>
                        <el-table :data="orderitem">
                            <el-table-column property="goodsId" label="商品id" />
                            <el-table-column property="amount" label="数量" />
                            <el-table-column property="price" label="价格" />
                        </el-table>
                    </el-popover>
                </p>
                <p>
                    <el-button type="warning" v-show="scope.row.paytype == '未支付'" @click="payfor(scope.row.id)">
                        支付
                    </el-button>
                    <el-button type="success" v-show="scope.row.paytype == '已支付' && scope.row.status == '已发货'"
                        @click="confirm(scope.row.id)">
                        确认签收
                    </el-button>
                </p>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import api from '@/api/api';
import { ref, onMounted, } from 'vue';
import { useStore } from 'vuex';
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus';

const store = new useStore();


var orderlist = ref([]);
var orderitem = ref([]);

// 日期格式化
const dateFormat = (row, column) => {
    var date = row[column.property];
    if (date === undefined) {
        return ''
    }
    return moment(date).format("YYYY-MM-DD HH:mm:ss")
}

// 支付
const payfor = (id) => {
    api.orderPay(id, 2);
    init.apply();
}
// 确认收货
const confirm = (id) => {
    ElMessageBox.confirm(
        '确定收到货再签收哦！',
        '注意！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            typeL: 'warning'
        }
    ).then(() => {
        api.orderStatus(id, 3);
        init.apply();
        ElMessage({
            message: '订单已完成！',
            type: 'success'
        })
    })
}
// 查看订单详情
const showitem = (id) => {
    api.showOrderitem(id)
        .then(ret => {
            orderitem.value = ret.result;
        })
}

const init = () => {
    api.showAllOrders(store.getters.userInfo.id)
        .then(ret => {
            orderlist.value = ret.result;
            // 转换paytype和status
            for (let i = 0; i < orderlist.value.length; i++) {
                let paytype = orderlist.value[i].paytype;
                let status = orderlist.value[i].status;
                switch (paytype) {
                    case 1: orderlist.value[i].paytype = "未支付"; break;
                    case 2: orderlist.value[i].paytype = "已支付"; break;
                }
                switch (status) {
                    case 1: orderlist.value[i].status = "待发货"; break;
                    case 2: orderlist.value[i].status = "已发货"; break;
                    case 3: orderlist.value[i].status = "已送达"; break;
                }
            }
        })
}
// 初始化
onMounted(init);

</script>

<style scoped>
.typetitle {
    text-align: left;
    margin-left: 10px;
    font-size: 30px;
    color: #E6A23C;
}
</style>
